<template>
  <t-form
    ref="form"
    :data="formData"
    :rules="rules"
    :label-width="100"
    @submit="onSubmit"
  >
    <t-row :gutter="[16, 16]">
      <t-col :span="12">
        <t-form-item name="name" label="合同名称">
          <t-input
            v-model="formData.name"
            placeholder="请输入合同名称"
            clearable
          />
        </t-form-item>
      </t-col>
      <t-col :span="12">
        <t-form-item name="type" label="合同类型">
          <t-select
            v-model="formData.type"
            placeholder="请选择合同类型"
            clearable
          >
            <t-option :value="1">采购合同</t-option>
            <t-option :value="2">销售合同</t-option>
            <t-option :value="3">服务合同</t-option>
          </t-select>
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="paymentType" label="付款类型">
          <t-select
            v-model="formData.paymentType"
            placeholder="请选择付款类型"
            clearable
          >
            <t-option :value="1">一次性付款</t-option>
            <t-option :value="2">分期付款</t-option>
            <t-option :value="3">按进度付款</t-option>
          </t-select>
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="amount" label="合同金额">
          <t-input-number
            v-model="formData.amount"
            placeholder="请输入合同金额"
            :min="0"
            :max="999999999"
            :step="1000"
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="partyA" label="甲方">
          <t-input
            v-model="formData.partyA"
            placeholder="请输入甲方名称"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="partyB" label="乙方">
          <t-input
            v-model="formData.partyB"
            placeholder="请输入乙方名称"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="signDate" label="签订日期">
          <t-date-picker
            v-model="formData.signDate"
            placeholder="请选择签订日期"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="startDate" label="生效日期">
          <t-date-picker
            v-model="formData.startDate"
            placeholder="请选择生效日期"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="endDate" label="结束日期">
          <t-date-picker
            v-model="formData.endDate"
            placeholder="请选择结束日期"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="12">
        <t-form-item name="adminName" label="管理员">
          <t-input
            v-model="formData.adminName"
            placeholder="请输入管理员姓名"
            clearable
          />
        </t-form-item>
      </t-col>

      <t-col :span="24">
        <t-form-item name="comment" label="备注">
          <t-textarea
            v-model="formData.comment"
            placeholder="请输入备注信息"
            :maxlength="500"
            :autosize="{ minRows: 3, maxRows: 5 }"
          />
        </t-form-item>
      </t-col>
    </t-row>

    <div class="operation-container">
      <t-space>
        <t-button theme="primary" type="submit">确定</t-button>
        <t-button theme="default" @click="onCancel">取消</t-button>
      </t-space>
    </div>
  </t-form>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { MessagePlugin, FormRule, SubmitContext } from 'tdesign-vue-next';
import { createContract, updateContract } from '@/api/contract';
import type { ContractInfo } from '@/api/contract';

const props = defineProps<{
  type: 'add' | 'edit';
  formData?: Partial<ContractInfo>;
}>();

const emit = defineEmits(['success', 'cancel']);

const form = ref();
const formData = ref<Partial<ContractInfo>>({});

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
  paymentType: [{ required: true, message: '请选择付款类型', trigger: 'change' }],
  amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
  partyA: [{ required: true, message: '请输入甲方名称', trigger: 'blur' }],
  partyB: [{ required: true, message: '请输入乙方名称', trigger: 'blur' }],
  signDate: [{ required: true, message: '请选择签订日期', trigger: 'change' }],
  startDate: [{ required: true, message: '请选择生效日期', trigger: 'change' }],
  endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
  adminName: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
} as Record<string, FormRule[]>;

watch(
  () => props.formData,
  (val) => {
    if (val) {
      formData.value = { ...val };
    }
  },
  { immediate: true }
);

// 表单提交
const onSubmit = async (ctx: SubmitContext) => {
  if (ctx.validateResult === true) {
    try {
      if (props.type === 'add') {
        await createContract(formData.value as ContractInfo);
        MessagePlugin.success('新增成功');
      } else {
        if (!props.formData?.id) {
          MessagePlugin.error('缺少合同ID');
          return;
        }
        const updateData = {
          id: props.formData.id,
          ...formData.value
        };
        await updateContract(updateData);
        MessagePlugin.success('更新成功');
      }
      emit('success');
    } catch (error) {
      console.error('提交失败:', error);
      MessagePlugin.error('提交失败');
    }
  }
};

// 取消处理
const onCancel = () => {
  emit('cancel');
};
</script>

<style lang="less" scoped>
.operation-container {
  margin-top: 20px;
  text-align: right;
}
</style> 